import MyTitle from '@/components/MyTitle'
import React, { FC, useEffect, useRef, useCallback } from 'react'
import { PlusOutlined, EditOutlined } from '@ant-design/icons';
import {
    ModalForm,
    ProFormText,
    ProFormSelect,
} from '@ant-design/pro-components';
import { Button, Form, message, Dropdown, Space, Tag } from 'antd';
import { ShowError } from './../../utils/message';
import { Ajax } from '@/api/api';
import { reg } from '@/utils/validate';
import _ from 'lodash'

interface XuekeType {
    label: string;
    value: string;
}


const UpdateUserForm: FC<any> = ({
    children,
    actionRef,
    flag,
    open,
    setOpen,
    updateData
}) => {
    const [form] = Form.useForm<XuekeType>();
    const onCancel = useCallback(() => {
        form.resetFields()
        setOpen(false)
    }, [])

    useEffect(() => {
        console.log(updateData)
        form.setFieldsValue(Object.assign({}, updateData))
    }, [updateData])
    return (
        <ModalForm<XuekeType>
            open={open}
            width={'30%'}
            title={'修改用户信息'}

            form={form}
            autoFocusFirstInput
            modalProps={{
                destroyOnClose: true,
                onCancel: onCancel,
            }}
            submitter={{
                searchConfig: {
                    submitText: '确定',
                    resetText: '取消',

                },
            }

            }
            submitTimeout={2000}
            onFinish={async (values) => {
                let params = {
                    _id: updateData._id,
                    ...values
                }
                let res = await Ajax.updateuser(params) as any;
                if (res.code == 200) {
                    actionRef.current.reload()
                    onCancel()
                }

            }}

            onFinishFailed={() => ShowError('校验失败')}
        >
            <ProFormText
                width="md"
                name="username"
                label="用户名称"
                placeholder="请输入"
                rules={[{ required: true, message: '请输入用户名称' }]}
            />
            <ProFormText
                width="md"
                name="phone"
                label="手机号码"
                placeholder="请输入"
                rules={[
                    {
                        required: true,
                        message: '请输入手机号！',
                    },
                    { pattern: reg.phone, message: '请输入格式正确的手机号' },
                ]}
            />
            <ProFormSelect
                width="md"
                request={async () => {
                    let res = await Ajax.getrolelist() as any;
                    let data = await Ajax.getuserinfo() as any;
                    return _.filter(res.result, (item: any) => data.result.role > item.value)
                }
                }
                name="role"
                label="用户角色"
                placeholder={'请选择'}
                rules={[
                    { required: true, message: '请输入选择' },
                ]}
            />
        </ModalForm>
    )
}

export default UpdateUserForm





